import React, { Component } from 'react'
import axios from 'axios'
import qs from 'qs'

export default class Search extends Component {
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search</h3>
        <div>
          {/* ref = {(input) => { this.input = input }}
          等价于
          ref = {input => this.input = input}
          等价于
          ref = {(input) => this.input = input} */}
          <input ref={(input) => { this.input = input }} type="text" placeholder="enter the name you search" />
          <button onClick={this.search}>搜索Search</button>
        </div>
      </section>
    )
  }
  search = () => {
    //发送请求前通知App更新状态
    this.props.updateAppState({ isFirst: false, isLoading: true })
    axios.post('/conner/shop/goods/list/v2', qs.stringify({
      nameLike: this.input.value
    })).then((res) => {
      console.log('成功了', res.data)
      //请求成功后通知App更新状态
      this.props.updateAppState({ isLoading: false, itemLists: res.data.data.result })
    })
      .catch((err) => {
        //请求失败后通知App更新状态
        this.props.updateAppState({ isLoading: false, err: '请求失败' })
      })
  }
}
